<template>
  <el-container class="common-layout">
    <Hearder/>
    <router-view v-slot="{ Component }" style="margin-top: 10px">
      <keep-alive include="case,new">
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
    <Footer/>
  </el-container>
</template>

<script setup>
import {onActivated, watchEffect} from 'vue';
import Hearder from "@/components/userindex/UHearder.vue";
import Footer from "@/components//userindex/UFooter.vue";
import {onBeforeRouteLeave, useRoute} from "vue-router";

// // 保存滚动位置
// function saveScrollPosition() {
//   console.log('Saving scroll position');
//   const scrollTop = window.scrollY || document.documentElement.scrollTop;
//   sessionStorage.setItem('scrollPosition', scrollTop);
//   console.log('scrollPosition', scrollTop);
// }
//
// // 恢复滚动位置
// function restoreScrollPosition() {
//   const savedPosition = sessionStorage.getItem('scrollPosition');
//   if (savedPosition) {
//     window.scrollTo(0, parseInt(savedPosition));
//   }
// }

const route = useRoute();

// // 在 beforeRouteLeave 钩子中保存滚动位置
// onBeforeRouteLeave((to, from, next) => {
//   console.log('Leaving route', from.name);
//   if (route.name === 'case' || route.name === 'new') {
//     saveScrollPosition();
//   }
//   next();
// });
//
// // 在 activated 钩子中恢复滚动位置
// onActivated(() => {
//   console.log('Activated route', route.name);
//   if (route.name === 'case' || route.name === 'new') {
//     restoreScrollPosition();
//   }
// });

/*// 使用 watch 监听路由变化，并保存滚动位置
watchEffect(() => {
  if (route.name === 'case' || route.name === 'new') {
    saveScrollPosition();
  }
});*/
</script>

<style scoped>
.common-layout {
  width: 100%; /* 确保布局宽度填满 */
  min-height: 100vh; /* 确保布局最小高度填满 */
  display: flex;
  flex-direction: column;
}

.el-container {
  flex: 1; /* 填充整个剩余高度 */
  display: flex;
  flex-direction: column;
}


</style>
